<!DOCTYPE html>
<html>
  <head>
    <title>Gas Purchase</title>
    <script type='text/javascript' src='js/prototype.js'></script>
    <script type='text/javascript' src='js/gasPurchase.js'></script>
  </head>
  <body>
    <div id='header'>
      <h1>Gas Purchase</h1>
      <ul>
        <li><a href='main.html'>main page</a></li>
        <li><a href='gasPurchase.html'>gas purchase</a></li>
        <li><a href='car.html'>car</a></li>
        <li><a href='vendor.html'>vendor</a></li>
      </ul>  
    </div>
        
<!--        
        post_input = web.input()
        db = web.database(dbn='sqlite', db=appDb)
        if post_input.bill and post_input.gallons and post_input.odometer and post_input.milesTraveled and post_input.ppg:
            success = db.insert('gas', car=post_input.carid, gallons=post_input.gallons, odometer=post_input.odometer, milesTraveled=post_input.milesTraveled, vendor=post_input.vendor, ppg=post_input.ppg, bill=post_input.bill, ts=post_input.ts)   
            if success:
                return "data insert successful"
            else:
                return "?????"
        else:
            return "the bill, odometer, miles traveled, ppg and gallons inputs must not be empty!"
         
-->

    <div id="mainContent">
      <form id='submit-gas-purchase' method='post' action='/app/cars/gas'>
        <table>
          <tr>
            <th>car:</th>
            <td>
              <select name='carid' id='car-list'>
                <option>--select a car--</option>
              </select>
            </td>
          </tr>   
          <tr>
            <th>odometer:</th>
            <td><input name='odometer' size='7'/></td>
          </tr> 
          <tr>
            <th>miles traveled:</th>
            <td><input name='milesTraveled' size='6'/></td>
          </tr> 
          <tr>
            <th>date and time:</th>
            <td><input name='ts' size='10' value='YYYY-mm-ddTHH:MM:ss'/></td>
          </tr>     
          <tr>
            <th>gallons filled:</th>
            <td><input name='gallons' size='10'/></td>
          </tr>   
          <tr>
            <th>price per gallon:</th>
            <td><input name='ppg' size='10'/></td>
          </tr>   
          <tr>
            <th>bill:</th>
            <td><input name='bill' size='10'/></td>
          </tr>   
          <tr>
            <th>vendor:</th>
            <td>
              <select name='vendor' id='vendor-list'>
                <option>--select vendor--</option>
              </select>
            </td>  
          </tr>
        </table>
        <p><input type='reset' value='clear'/></p>
      </form>
      <p>
        <button id='submit-gas-purchase-button'>record purchase</button>
        <div id='submit-status'/>
      </p>	
    </div>      
    <div id='last-ten-records-by-car'/>
  </body>
</html>  
